<template>
    语言:<Select v-model:value="language" :options="languages" class="w-[120px]"></Select>
         <VueMonacoEditor
            v-model:value="code"
            :theme="isMounted ? theme : 'default-theme'"
            default-language="javascript"
            :language="language"
            :height="editorHeight"
            width="100%"
            @change="handleEditorChange"
            :options="{
                automaticLayout: true,
                domReadOnly: true,
                quickSuggestions: false,
                minimap: { enabled: false },
                lineNumbersMinChars: 1, // would change line num width
                wordWrap: 'on', // auto line wrap
                unicodeHighlight: {
                ambiguousCharacters: false,
                },
                
            }"
            @mount="handleEditorDidMount">
          </VueMonacoEditor>
   
</template>
<script setup lang="ts" name="Editor">
import * as monaco from "monaco-editor"
import { loader,VueMonacoEditor } from "@guolao/vue-monaco-editor"
import {ref,shallowRef} from 'vue'
import { Select } from "ant-design-vue"
import {computed} from 'vue';
loader.config({ paths: { vs: '/vs' } })

// loader.config({ monaco })

const CODE_EDITOR_LINE_HEIGHT = 100
const code = ref('')
const isFocus = ref(false);
const isMounted = ref(false);
const language = ref('javascript')
const editorRef = shallowRef()

const DEFAULT_THEME = {
  base: 'vs',
  inherit: true,
  rules: [],
  colors: {
    'editor.background': '#F2F4F7', // #00000000 transparent. But it will has a blue border
  },
}
const editorContentHeight = ref(500);
const editorHeight = computed(()=> {
   return  (editorContentHeight.value / 2 + CODE_EDITOR_LINE_HEIGHT) + 'px'
})
const handleEditorDidMount = (editor: any, monaco: any) => {
    editorRef.value = editor
    resizeEditorToContent()

    editor.onDidFocusEditorText(() => {
        isFocus.value = (true)
    })
    editor.onDidBlurEditorText(() => {
        isFocus.value = (false)
    })

    monaco.editor.defineTheme('default-theme', DEFAULT_THEME)

    monaco.editor.defineTheme('blur-theme', {
      base: 'vs',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#F2F4F7',
      },
    })

    monaco.editor.defineTheme('focus-theme', {
      base: 'vs',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#ffffff',
      },
    })

    monaco.editor.setTheme('default-theme') // Fix: sometimes not load the default theme

    isMounted.value = (true)
  }
  const resizeEditorToContent = () => {
    if (editorRef.value) {
      const contentHeight = editorRef.value.getContentHeight() // Math.max(, minHeight)
      editorContentHeight.value = (contentHeight)
      console.log("content:", editorContentHeight.value);
    }
  }
  const handleEditorChange = (value: string | undefined) => {
    setTimeout(() => {
      resizeEditorToContent()
    }, 10)
  }
  const theme = computed(() => {
    return isFocus.value ? 'focus-theme' : 'blur-theme'
  })

const languages = [
    {label:'javascript',value:'javascript'},
    {label:'python3',value:'python'},
    {label:'yaml',value:'yaml'},
    {label:'java',value:'java'},
]
</script>